<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类列表</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/Level1-classify-list.css">
</head>
<body>
<div id="title">
    艺术欣赏
</div>
<div id="main-menu">
    <script type="text/html" id="mainMenuTemp">
        {{each}}
        <div class="menu-item" data-id="{{$value.id}}" data-menuId="{{$value.menuId}}" data-name="{{$value.name}}">
            <div class="menu-item-wrap marquee">{{$value.name || $value.titleName}}</div>
        </div>
        {{/each}}
    </script>
    <!--<div class="menu-item active">-->
    <!--<div class="menu-item-wrap">视频</div>-->
    <!--</div>-->
    <!--<div class="menu-item leave">-->
    <!--<div class="menu-item-wrap">微视频</div>-->
    <!--</div>-->
</div>
<div id="content">
    <!--文字列表样式A-->
    <div id="textListStyleA" class="tab-content">
        <script type="text/html" id="textListStyleATemp">
            <ul class="simple-list">
                {{each}}
                <li class="list-item"
                    data-url="{{$imports.getListUrl($value)}}?id={{$value.id}}">
                    <div class="icon">
                        {{if $value.genre==3}}
                        <img src="../images/text-list/sp.png" alt="">
                        {{else}}
                        <img src="../images/text-list/wz.png" alt="">
                        {{/if}}
                    </div>
                    <h3 class="title marquee">{{$value.titleName}}</h3>
                    <span class="time">{{$value.createTime  |DateFormat 'yyyy-MM-dd'}}</span>
                </li>
                {{/each}}
            </ul>
        </script>
    </div>
    <!--文字列表样式B-->
    <div id="textListStyleB" class="tab-content">
        <script type="text/html" id="textListStyleBTemp">
            <ul class="simple-list">
                {{each}}
                <li class="list-item"
                    data-url="{{$imports.getListUrl($value.genre)}}?id={{$value.id}}">
                    <h3 class="title marquee">{{$value.titleName}}</h3>
                    <span class="time">{{$value.createTime  |DateFormat 'yyyy-MM-dd'}}</span>
                </li>
                {{/each}}
            </ul>
        </script>
    </div>
    <!--文字列表样式C 点赞显示-->
    <div id="textListStyleC" class="tab-content">
        <script type="text/html" id="textListStyleCTemp">
            <ul class="simple-list">
                {{each}}
                <li class="list-item"
                    data-url="../page/detailComment.html?id={{$value.id}}">
                    <h3 class="title marquee">{{$value.titleName}}</h3>
                    <span class="praise">{{$value.pollNumber}} 赞</span>
                </li>
                {{/each}}
            </ul>
        </script>
    </div>
    <!--图片列表样式A-->
    <div id="imgListStyleA" class="tab-content card002">
        <script type="text/html" id="imgListStyleATemp">
            {{each}}
            <div class="list-item" data-url="{{$imports.getListUrl($value.genre)}}?id={{$value.id}}">
                <div class="list-item-wrap">
                    <div class="thumb">
                        <img src="{{$value.pictures|getCover}}" alt="" onerror="this.src='../images/default.png'">
                    </div>
                    <div class="mask"></div>
                    <div class="title">{{$value.titleName}}</div>
                </div>
            </div>
            {{/each}}
        </script>
    </div>
    <!--图片列表样式B-->
    <div id="imgListStyleB" class="tab-content card002">
        <script type="text/html" id="imgListStyleBTemp">
            {{each}}
            <div class="list-item" data-url="joinVote.html?id={{$value.id}}&title1=东岳文化&title2=爱心行动">
                <div class="list-item-wrap">
                    <div class="thumb">
                        <img src="{{$value.coverPic|getCover}}" alt="" onerror="this.src='../images/default.png'">
                    </div>
                    <div class="mask"></div>
                    <div class="title">{{$value.titleName}}</div>
                </div>
            </div>
            {{/each}}
        </script>
    </div>
    <!--视频列表样式A-->
    <div id="videoListStyleA" class="tab-content">
        <script type="text/html" id="videoListStyleATemp">
            {{each}}
            <div class="list-item" data-url="{{$imports.getListUrl($value)}}?id={{$value.id}}">
                <div class="list-item-wrap">
                    <div class="preview-img">
                        <img src="{{$imports.CONFIG.IMAGE_RESOURCES_ADDRESS+$value.pictures}}" alt=""
                             onerror="this.src='../images/default.png'">
                    </div>
                    <div class="play-btn">
                        <img src="../images/column-list/play.png" alt="">
                    </div>
                    <div class="title">
                        {{$value.titleName}}
                    </div>
                </div>
            </div>
            {{/each}}
        </script>
    </div>
    <!--视频列表样式B-->
    <div id="videoListStyleB" class="tab-content">
    </div>
    <!--图文详情列表样式A-->
    <div id="imgTextStyleA" class="tab-content">
        <script type="text/html" id="imgTextStyleATemp">
            <div class="left-box">
                <div class="left-box-wrap">
                    <img src="{{$data[0].pictures|getCover}}" alt="" onerror="this.src='../images/Level1-classify-list/imgTextA/img.png'">
                </div>
            </div>
            <div class="right-box">
                <div class="right-box-warp">
                    <div class="title">内容详情</div>
                    <div id="imgTextStyleAContent" class="content">
                    </div>
                </div>
            </div>
        </script>
    </div>
    <!--详情样式A-->
    <div id="detailStyleA" class="tab-content">
        <script type="text/html" id="detailStyleATemp">
            <div id="detailStyleAContent" class="content">
            </div>
            <div id="detailStyleABtn" class="btn-container"><span class="btn">点击进入</span></div>
        </script>
    </div>
    <!--图片详情列表样式A-->
    <div id="imgStyleA" class="tab-content">

    </div>
    <!---->
    <div id="menuListStyleA" class="tab-content">
        <script type="text/html" id="menuListStyleATemp">
            {{each}}
            {{if $index===3}}
            <div class="list-item" data-url="javascript:tips();//">
                <div class="list-item-wrap">
                    <img src="../images/Level1-classify-list/menuListA/{{$index+1}}.png" alt="">
                </div>
            </div>
            {{else}}
            <div class="list-item"
                 data-url="Level0-classify-list.html?id={{$value.id}}&menuId={{$value.menuId}}&title={{$value.name}}">
                <div class="list-item-wrap">
                    <img src="../images/Level1-classify-list/menuListA/{{$index+1}}.png" alt="">
                </div>
            </div>
            {{/if}}
            {{/each}}
        </script>
    </div>


</div>

<div id="page">
</div>

<script src="../js/S.js"></script>
<script src="../js/common.js"></script>
<script src="../js/tvProcess.js"></script>
<script src="../js/template-web.js"></script>
<script src="../js/list.js"></script>
<script src="../js/dialog.js"></script>
<script src="../js/content.js"></script>
<script>
    /**
     * DEMO测试数据正式环境请删除
     * 创建于数字文化馆项目
     */
    tools.test('http://10.0.1.122:8080/HS_InterfaceManage_YNX/myServletControls.do?action=getMenusByFileJson&fname=configs/dayiwenhua/DaYiculture_TV.json',
        '11126d834032346d1bc87183383bf5d804461dfa4914b08ebb82239251902a10294af88d1861831e3174844fe3aa7be3d3d10872f52802e29c8ca002184e9699c8034cf10932dd666e0eb0568ead6e53888dc3e69688dfdfd8387277d31f06c98ffacb4f3d99934f9943b31527cc97b6c7e86ce9ea3d2dafe099dfea259214675448196de5be44154abb32f6086b7d0f66fa16bb4274d482193a8898cd5029946266b22caba2104278c0a0a39957e66b79cb485f558bfc0d82f9fd1bb9d04deba0ba347f34bd6cb3a47c62d8472465df')
    keyopt.options.focusElm = 'mainMenuItem1';

    var uId = tools.getUrlParam('id') || '03280913052920012';
    var uMenuId = tools.getUrlParam('menuId') || '03271143491060006';
    var uTitle = tools.getUrlParam('title') || '东岳文化';
    var sAction = tools.getUrlParam('s_action') ? tools.getUrlParam('s_action').split(',') : ['getMenuByPid_new', 'getDaYicultureContentList'];
    //自定义列表传 s_action=getMenuByPid_new,getMuseumContentList
    $('#title').text(uTitle);

    var page = tools.getSave('page') ? tools.getSave('page') - 1 : 0;


    function getCurLeave() {
        if (tools.getLeave()) {
            return tools.getLeave();
        }
        if ($('.leave').length) {
            return $('.leave')[0].id
        }
        return 'mainMenuItem1'
    }

    var mainMenuList = new List({
        action: sAction[0],
        tempId: 'mainMenuTemp',
        itemClassName: 'menu-item',
        idPrefix: 'main',
        col: 20,
        params: {
            pmenuid: uId,
            menuId: uMenuId,
            pageIndex: '0',
            pageSize: 20
        },
        callback: function (data) {
            keyopt.moveToElm(keyopt.options.focusElm);
            mainMenuList.setListOnSubmit(function (code, id) {
                switchTab(id);
            });
            mainMenuList.setListOnFocus(function (code, id) {
                itemScroll(id)
            });
            mainMenuList.setListOnBlur(function (code, id) {
                itemScroll(getCurLeave())
            });
            switchTab(getCurLeave());
        }
    });
    function tips() {
        var dialog=new Dialog('listItem4');
        dialog.alert('功能未开放',function (code,id) {
            $('#'+id).removeClass('active');
            tools.removeStore('dywh.html');
            dialog.close();
            keyopt.options.focusElm='listItem4'
        })
    }
    function switchList(elemId, callback) {

        var tabList = new List({
            action: sAction[1],
            tempId: elemId + 'Temp',
            params: {
                menuId: '',
                pageIndex: page,
                pageSize: 6
            },
            callback: function (data) {
                mainMenuList.setListGoBottom('listItem1');
                tabList.setListGoTop(getCurLeave());

                tools.recoveryFocus();
                tabList.setListOnSubmit(function (code, id) {
                    tools.saveFocus({
                        page: tabList.def.currentPage
                    });
                });
                $('.tab-content').hide();
                document.getElementById(tabList.def.tempId).parentNode.style.display = 'block';
                callback && callback(data)

            }
        });

        return tabList;
    }

    mainMenuList.getData().addPositionControl(0, 0, 0, 30);


    function itemScroll(id) {
        var offsetLeft = document.getElementById(id).offsetLeft;
        var offsetWidth = document.getElementById(id).offsetWidth;
        console.log(offsetLeft, offsetWidth);
        if (offsetLeft > 1060) {
            document.getElementById(id).parentNode.style.left = -offsetLeft + 1060 + 'px'
        } else {
            document.getElementById(id).parentNode.style.left = null
        }
    }

    var L1StyleMap = EXTEND.L1StyleA;

    function getStyle(title, subTitle) {
        console.log(title, subTitle);
        for (var i = 0; i < L1StyleMap.length; i++) {
            if (title === L1StyleMap[i].title) {
                var child = L1StyleMap[i].child;
                for (var c = 0; c < child.length; c++) {
                    if (child[c].title === subTitle) {
                        return child[c].style;
                    }
                }
                return L1StyleMap[i].style;
            }
        }
    }
    function getJsonData(title, subTitle) {
        console.log(title, subTitle);
        for (var i = 0; i < L1StyleMap.length; i++) {
            if (title === L1StyleMap[i].title) {
                var child = L1StyleMap[i].child;
                for (var c = 0; c < child.length; c++) {
                    if (child[c].title === subTitle) {
                        return child[c];
                    }
                }
                return L1StyleMap[i];
            }
        }
    }

    function switchTab(elemId) {
        var menuId = document.getElementById(elemId).getAttribute('data-menuId');
        var subTitle = document.getElementById(elemId).getAttribute('data-name');
        var id = document.getElementById(elemId).getAttribute('data-id');

        if (sAction[0] === 'getMenuByPid_new')
            id = '';
//        清除
        $('.list-item').attr('id', '');

        var style = getStyle(uTitle, subTitle);
        var jsonData = getJsonData(uTitle, subTitle);
        console.log(style)
        switch (style) {
            case 'textListStyleC':
                switchList('textListStyleC')
                    .setParams({
                        stairColumnId: id,
                        menuId: menuId,
                        pageSize: 7
                    })
                    .getData()
                    .addPageControl();
                break;
            case 'textListStyleB':
                switchList('textListStyleB')
                    .setParams({
                        stairColumnId: id,
                        menuId: menuId,
                        pageSize: 7
                    })
                    .getData()
                    .addPageControl();
                break;
            case 'detailStyleA':
                switchList('detailStyleA', function (data) {
                    mainMenuList.setListGoBottom('detailStyleABtn');
                    document.getElementById('detailStyleA').innerHTML += template('detailStyleATemp', {});
                    new Content({
                        content: jsonData.content,
                        elemId: 'detailStyleAContent',
                        go_top: getCurLeave()
                    })
                    // tools.recoveryFocus();
                    detailStyleABtn_json.go_top=getCurLeave();
                    detailStyleABtn_onsubmit=function (code,id) {
                        location.href=jsonData.url
                        // tools.saveFocus({page:1});
                    }
                }).setParams({
                    stairColumnId: id,
                    menuId: menuId
                }).getData();
                break;
            case 'imgTextStyleA':
                switchList('imgTextStyleA', function (data) {
                    mainMenuList.setListGoBottom('contentPrevBtn');
                    new Content({
                        content: tools.SBEncode(data.datas[0].content),
                        elemId: 'imgTextStyleAContent',
                        go_top: getCurLeave()
                    }).addPageControl(100, 420);
                }).setParams({
                    stairColumnId: id,
                    menuId: menuId
                }).getData();
                break;
            case 'imgListStyleA':
                switchList('imgListStyleA')
                    .setOptions('col', 3)
                    .setParams({
                        stairColumnId: id,
                        menuId: menuId
                    })
                    .getData()
                    .addPositionControl(208, 380, 10, 10)
                    .addPageControl();
                break;
            case 'imgListStyleB':
                switchList('imgListStyleB').setOptions('action','getHierarchyContentList')
                    .setOptions('col', 3)
                    .setParams({
                        stairColumnId: id,
                        menuId: menuId
                    })
                    .getData()
                    .addPositionControl(208, 380, 10, 10)
                    .addPageControl();
                break;
            case 'menuListStyleA':
                switchList('menuListStyleA', function (data) {

                }).setOptions('action', 'getMenuByPid_new').setColNum(4).setParams({
                    pmenuid: '0328091613810021',
                    menuId: menuId,
                    pageSize: 4
                }).getData().addPositionControl(408, 248, 20, 20);
                break;
            default:
                break;
        }
        tools.clearLeave();
        tools.addClass(elemId, 'leave');
        page = 0
    }


    var detailStyleABtn_json = {
        go_top: '',
        go_bottom: '',
        go_left: '',
        go_right: ''
    };
    var detailStyleABtn_onfocus = function (code, id) {
        $('#'+id).addClass('active')
    };
    var detailStyleABtn_onblur = function (code, id) {
        $('#'+id).removeClass('active')
    };
    var detailStyleABtn_onsubmit = function (code, id) {
        tools.saveFocus();
    };
</script>
</body>
</html>